<template>
	<div class="adCostConfig" :style="{width:initWidth}">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'><i class="icon iconfont">&#xe7d8;</i>
				当前位置/系统配置/
				<span>广告成本配置</span>
			</div>
		</div>
		<div class="right_content">
			<div class="form" style="margin-bottom:30px">
				 <div class="adCostConfigTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">
						系统默认分成比例:
					</span>
				</div>
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" style="width:100%">
					<div class="form-A">
						<div class="form-A-cell">
							<div class="form-A-hed">
								IOS
							</div>
							<div  class="form-A-hbd t1">
								<el-form-item  prop="IOS">
									<template scope="scope">
										<el-input v-model="ruleForm.IOS"   placeholder="请输入比例"></el-input> 
									</template>
								</el-form-item>
							</div>
						</div>
						<div class="form-A-cell">
							<div class="form-A-hed">
								安卓
							</div>
							<div class="form-A-hbd t1">
								<el-form-item prop="android">
									<template scope="scope">
										<el-input v-model="ruleForm.android"   placeholder="请输入比例"></el-input> 
									</template>
								</el-form-item>
							</div>
						</div>
						<div class="form-A-cell">
							<div class="form-A-hed">
								操作
							</div>
							<div class="form-A-hbd t1" >
								<el-form-item>
									<template scope="scope">
										<el-button  @click="editForm('ruleForm', scope.row)" >修改</el-button>
									</template>
								</el-form-item>
							</div>

						</div>
						
					</div>
				</el-form>
			</div>
			<div class="form"  style="margin-bottom:30px">
				 <div class="adCostConfigTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">
						添加广告成本:
					</span>
				</div>
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-form-inline" :inline="true">

					<div class="import" >
						<el-form-item label="选择游戏：" :label-width="formLabelWidth">
							<el-select
							  v-model="region" @change='projectsChange'
							  placeholder="请选择游戏" type="success" multiple>
								<el-option
							    v-for="item in projects"
						        :label="item.label"
						        :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="日期：">
							<el-date-picker
								v-model="ruleForm.ldate"
								@change="ldateFn"
								type="date"
								placeholder="选择日期"
								prop="ldate"
								>	</el-date-picker>
						</el-form-item>
						<el-form-item label="广告ID：" prop="id">
							<el-input v-model="ruleForm.id" placeholder="广告ID"></el-input>
						</el-form-item>
						<el-form-item label="平台：" prop="platform">
							<el-input v-model="ruleForm.platform" placeholder="设置平台"></el-input>
						</el-form-item>
						<el-form-item label="代理公司：" prop="agent">
							<el-input v-model="ruleForm.agent" placeholder="设置代理公司"></el-input>
						</el-form-item>
						<el-form-item label="渠道名称：" prop="channelName">
							<el-input v-model="ruleForm.channelName" placeholder="设置渠道"></el-input>
						</el-form-item>
						<el-form-item label="成本：" prop="cost">
							<el-input v-model="ruleForm.cost" placeholder="设置成本"></el-input>
						</el-form-item>
						<el-form-item label="返点：" prop="rebate">
							<el-input v-model="ruleForm.rebate" placeholder="设置返点"></el-input>
						</el-form-item>
						<el-form-item label="折后成本：" prop="discount">
							<el-input v-model="ruleForm.discount" placeholder="折后成本"></el-input>
						</el-form-item>
						<el-form-item label="分成比例：" prop="roi">
							<el-input v-model="ruleForm.roi" placeholder="分成比例"></el-input>
						</el-form-item>
					</div>
					<el-form-item class="conmit">
						<el-button type="primary" @click="addForm('ruleForm')" icon="plus">立即添加</el-button>
						<el-button type="primary" @click="searchForm('ruleForm')" icon="search">立即搜索</el-button>
						<el-button type="primary" @click="uploadForm" icon="upload">立即上传</el-button>
						<br>
						<span class="warning">（输入搜索条件，留空搜索全部！）</span>
					</el-form-item>
				</el-form>
			</div>
			<div class="table">
				<div class="adCostConfigTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">
						已有配置：<el-button type="primary" class="exportXLS" size="small" @click="excel('1','广告系统配置表')"><i class="iconfont">&#xe703;</i>&nbsp;导出EXCEL</el-button>
					</span>
				</div>
				<el-table
					:data="tableData"
					:default-sort = "{prop: 'ldate', order: 'descending'}"
					style="width: 100%">
					<el-table-column align="center"
					  label="id">
						<template scope="scope">
							<span>{{ scope.row.id }}</span>
						</template>
					</el-table-column>
					<el-table-column align="center"
					  label="日期"  prop="ldate">
						<template scope="scope">
							<el-input  v-model="scope.row.ldate" placeholder="" ></el-input>
						</template>							
						</el-table-column>
					<el-table-column align="center"
					  label="平台" prop="platform">
						<template scope="scope">
							<el-input  v-model="scope.row.platform" placeholder="" ></el-input>
						</template>						
						</el-table-column>
					<el-table-column align="center" prop="agent"
					  label="代理公司">
						<template scope="scope">
							<el-input  v-model="scope.row.agent" placeholder="" ></el-input>
						</template>						
						</el-table-column>
					<el-table-column align="center" prop="channelName"
					  label="渠道名称">
						<template scope="scope">
							<el-input  v-model="scope.row.channelName" placeholder="" ></el-input>
						</template>						
						</el-table-column>
					<el-table-column align="center" prop="cost"
					  label="成本">
						<template scope="scope" >
							<el-input  v-model="scope.row.cost" placeholder=""></el-input>
						</template>						
						</el-table-column>
					<el-table-column align="center" prop="rebate"
					  label="返点">
						<template scope="scope">
							<el-input  v-model="scope.row.rebate" placeholder="" ></el-input>
						</template>						
						</el-table-column>
					<el-table-column align="center" prop="discount"
					  label="折后成本">
						<template scope="scope">
							<el-input  v-model="scope.row.discount" placeholder="" ></el-input>
						</template>						
						</el-table-column>
					<el-table-column align="center" prop="roi"
					  label="分成比例">
						<template scope="scope">
							<el-input  v-model="scope.row.roi" placeholder="" ></el-input>
						</template>						
						</el-table-column>
					<el-table-column label="操作" align="center" width="300">
						<template scope="scope">
							<el-button 
					      		size="small"
					      		@click="handleEdit(scope.$index, scope.row)">修改</el-button>
							<el-button
					      		size="small"
								type="danger"
					      		@click="handleDelete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="block">
					
					<el-pagination
				    layout="prev, pager, next"
				    :total="dataTotal"></el-pagination>
				</div>
			</div>
		</div>

		<div class="uploadForm" v-show="uploadShow">
			<div class="uploadChoose">
				<div class="vicp-close"  @click="uploadShow=false"> <i class="el-icon-close vicp-icon4"></i>
				</div>
				<div class="upload">
					<h5>上传文件</h5>
					<h6>说明：</h6>
					<ol>
						<li>上传的文件必须为Excel文件；</li>
						<li>文件内容不能有表头，必须直接是数据；</li>
						<li>数据共分为八列：日期(字符串 格式:yyyy-MM-dd)、平台、代理公司、渠道名称、成本、返点、折后成本、分成比例</li>
					</ol>
					<p>示例（物品类型配置）如下：</p>
					<img src="./adUpload.jpg" width="354" alt="上传图片">
					<el-upload
					  class="upload-demo"
					  drag
					  :action="SRC+'/advcostconfig/upload.do'"
					  :on-success="upload"
					  multiple>
					  <i class="el-icon-upload"></i>
					  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
					</el-upload>
				</div>
			</div>
		</div>
		<a href="" download="广告成本配置表.xlsx" id="hf"></a>
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="./adCostConfig.styl"></style>
<script src="./adCostConfig.js"></script>